<template>
  <t-row>
    <t-col :span="12">
      <t-card title="网络" bordered hover-shadow class="card">

        <t-space :size="50">
          <t-statistic title="TX" :value="130" suffix="KB/s">
            <template #prefix><t-icon name="arrow-up"></t-icon></template>
          </t-statistic>

          <t-statistic title="RX" :value="1.5" suffix="MB/s">
            <template #prefix><t-icon name="arrow-down"></t-icon></template>
          </t-statistic>
          <t-statistic title="已发送" :value="1.2" suffix="GB">
            <template #prefix><t-icon name="arrow-up"></t-icon></template>
          </t-statistic>
          <t-statistic title="已接收" :value="113.1" suffix="MB">
            <template #prefix><t-icon name="arrow-down"></t-icon></template>
          </t-statistic>
        </t-space>

        <template #actions>
          <t-tooltip content="提示信息" showArrow theme="light" placement="mouse">
            <a><t-icon name="info-circle"></t-icon></a>
          </t-tooltip>
        </template>
      </t-card>
    </t-col>
  </t-row>

  <t-row>
    <t-col :span="12">
      <t-card title="详细数据" bordered hover-shadow class="card">
        <NetworkChart height="300" title="RX" data-name="RX" :data="data1"></NetworkChart>
        <NetworkChart height="300" title="TX" data-name="TX" :data="data2"></NetworkChart>
        <NetworkChart height="300" title="已发送" data-name="已发送" :data="data1"></NetworkChart>
        <NetworkChart height="300" title="已接收" data-name="已接收" :data="data2"></NetworkChart>


        <template #actions>
          <t-tooltip content="提示信息" showArrow theme="light" placement="mouse">
            <a><t-icon name="info-circle"></t-icon></a>
          </t-tooltip>
        </template>
      </t-card>
    </t-col>
  </t-row>



</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useStatusStore } from '@/stores'

import NetworkChart from '@/components/NetworkChart.vue';
import { ref } from 'vue';
const router = useRouter()
const statusStore = useStatusStore()

const data1 = ref([
  [
    1744939594000,
    3245
  ],
  [
    1744939599000,
    2567
  ],
  [
    1744939604000,
    3890
  ],
  [
    1744939609000,
    4567
  ],
  [
    1744939614000,
    3210
  ],
  [
    1744939619000,
    2789
  ],
  [
    1744939624000,
    3567
  ],
  [
    1744939629000,
    4234
  ],
  [
    1744939634000,
    3876
  ],
  [
    1744939639000,
    4567
  ],
  [
    1744939644000,
    3210
  ],
  [
    1744939649000,
    2789
  ],
  [
    1744939654000,
    3567
  ],
  [
    1744939659000,
    4234
  ],
  [
    1744939664000,
    3876
  ],
  [
    1744939669000,
    4567
  ],
  [
    1744939674000,
    3210
  ],
  [
    1744939679000,
    2789
  ],
  [
    1744939684000,
    745
  ],
  [
    1744939689000,
    1500
  ]
])
const data2 = ref([
  [
    1744939594000,
    234
  ],
  [
    1744939599000,
    42
  ],
  [
    1744939604000,
    212
  ],
  [
    1744939609000,
    487
  ],
  [
    1744939614000,
    321
  ],
  [
    1744939619000,
    12
  ],
  [
    1744939624000,
    189
  ],
  [
    1744939629000,
    398
  ],
  [
    1744939634000,
    123
  ],
  [
    1744939639000,
    456
  ],
  [
    1744939644000,
    23
  ],
  [
    1744939649000,
    234
  ],
  [
    1744939654000,
    478
  ],
  [
    1744939659000,
    101
  ],
  [
    1744939664000,
    321
  ],
  [
    1744939669000,
    499
  ],
  [
    1744939674000,
    98
  ],
  [
    1744939679000,
    287
  ],
  [
    1744939684000,
    450
  ],
  [
    1744939689000,
    78
  ]
])

</script>

<style scoped>
.card {
  margin: 10px;
}
</style>